<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('客户产品信息列表')" />
	<th:block th:include="include :: datetimepicker-css" />
	<style type="text/css">
		#laydate-startTime {
			width: 100px;
		}
		#laydate-endTime {
			width: 100px;
		}
	</style>
</head>
<body class="gray-bg">
	<div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="post-form">
					<div class="select-list">
						<ul>
							<li>
								<label>投片日期：</label>
								<input type="text" class="input-sm" id="laydate-startTime" name="recordDateStart" placeholder="请选择日期" />
								<span>~</span>
								<input type="text" class="input-sm" id="laydate-endTime" name="recordDateEnd" placeholder="请选择日期" />
							</li>
							<li>
								产品名称：<input type="text" name="partName"/>
							</li>
							<li>
								批号：<input type="text" name="lotId" />
							</li>
							<li>
								当前状态：<select name="state" th:with="type=${@dict.getType('state')}">
									<option value="">所有</option>
									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
								</select>
							</li>
							<!-- <li th:style="'display:' + ${isXsManager == true ? 'inline' : 'none'}"> -->
							<li th:if="${isXsManager}">
								<label>客户名称：</label>
								<select name="customerCode" th:with="cus=${cwWipCustomerInfo}">
									<option value="">所有</option>
									<option th:each="dict : ${cus}" th:text="${dict.customerName}" th:value="${dict.customerCode}"></option>
								</select>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
			
			<div class="btn-group-sm" id="toolbar" role="group">
				<a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="wip:product:export">
		            <i class="fa fa-download"></i> 导出
		        </a>
	        </div>
	        
	        <div class="col-sm-12 select-table table-striped">
			    <table id="bootstrap-table" style="table-layout:fixed;word-break:break-all;"></table>
			</div>
		</div>
	</div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: datetimepicker-js" />
	<script th:inline="javascript">
		var datas = [[${@dict.getType('sys_normal_disable')}]];
		var prefix = ctx + "wip/product";
		var splictPage = [10, 20, 30, 50];

		var columnArrys = new Array(20);
		columnArrys = [
			{
				checkbox: true
			},
			{
				field: 'NO',
				title: "序号",
				width: 50,
				formatter: function (value, row, index) {
					return $.table.serialNumber(index);
				}
			},
			{
				field: 'timeFlag',
				title: '日期标识',
				sortable: true,
				width: 100
			},
			{
				field: 'customerName',
				title: '客户名称',
				sortable: true,
				width: 100
			},
			{
				field: 'orderNumber',
				title: '客户订单号',
				sortable: true,
				width: 150
			},
			{
				field: 'partName',
				title: '产品名称',
				sortable: true,
				width: 150
			},
			{
				field: 'lotId',
				title: '批号',
				sortable: true,
				width: 150
			},
			{
				field: 'partType',
				title: '产品类型',
				sortable: true,
				width: 100
			},
			{
				field: 'lotType',
				title: '批次类型',
				sortable: true,
				width: 100
			},
			{
				field: 'priority',
				title: '等级',
				sortable: true,
				width: 100
			},
			{
				field: 'mainQty',
				title: '当前数量',
				sortable: true,
				width: 100
			},
			{
				field: 'stageDsc',
				title: '当前站点',
				sortable: true,
				width: 150
			},
			{
				field: 'stepDesc',
				title: '工步描述',
				sortable: true,
				width: 300
			},
			{
				field: 'contime',
				title: '停留时间/天',
				sortable: true,
				width: 100
			},
			{
				field: 'state',
				title: '当前状态',
				sortable: true,
				width: 100
			},
			{
				field: 'startTime',
				title: '投片时间',
				sortable: true,
				width: 150
			},
			{
				field: 'planEndDate',
				title: '计划完工日期',
				sortable: true,
				width: 150
			},
			{
				field: 'stepseq',
				title: '当前工步',
				sortable: true,
				width: 100
			},
			{
				field: 'nextstep',
				title: '剩余工步',
				sortable: true,
				width: 100
			},
			{
				field: 'stepcount',
				title: '总工步',
				sortable: true,
				width: 100
			},
			{
				field: 'nextgkb',
				title: '剩余光刻数',
				width: 100
			},
			{
				field: 'countgkb',
				title: '总光刻数',
				width: 100
			}
		];

		$(function() {
			layui.use('laydate', function(){
				var laydate = layui.laydate;
				var startDate = laydate.render({
					elem: '#laydate-startTime',
					max: $('#laydate-endTime').val(),
					theme: 'molv',
					trigger: 'click',
					done: function(value, date) {
						// 结束时间大于开始时间
						if (value !== '') {
							endDate.config.min.year = date.year;
							endDate.config.min.month = date.month - 1;
							endDate.config.min.date = date.date;
						} else {
							endDate.config.min.year = '';
							endDate.config.min.month = '';
							endDate.config.min.date = '';
						}
					}
				});

				var endDate = laydate.render({
					elem: '#laydate-endTime',
					min: $('#laydate-startTime').val(),
					theme: 'molv',
					trigger: 'click',
					done: function(value, date) {
						// 开始时间小于结束时间
						if (value !== '') {
							startDate.config.max.year = date.year;
							startDate.config.max.month = date.month - 1;
							startDate.config.max.date = date.date;
						} else {
							startDate.config.max.year = '';
							startDate.config.max.month = '';
							startDate.config.max.date = '';
						}
					}
				});
			});

		    var options = {
		        url: prefix + "/list",
		        exportUrl: prefix + "/export",
		        modalName: "产品",
		        columns: columnArrys,
				pageList: splictPage
		    };
		    $.table.init(options);
		});
	</script>
</body>
</html>